<template>
    <!-- 简单组件 -->
    <el-select v-model="selectValue" @change="selectChange" :collapse-tags="collapseTags" :multiple="multiple"
        :filterable="filterable" :placeholder="placeholder" :collapse-tags-tooltip="tooltip" :clearable="clearable">
        <el-option v-for="item in options" :key="item.id" :label="item.value" :value="item.key" />
    </el-select>
</template>

<script setup lang="ts">
import { useFormItem } from 'element-plus'

// 定义组件接收的属性
const selectValue = defineModel<any>("selectValue")
const emit = defineEmits(['myChange'])
const props = defineProps({
    multiple: {
        type: Boolean,
        default: false
    },
    clearable: {
        type: Boolean,
        default: true
    },
    filterable: {
        type: Boolean,
        default: false
    },
    collapseTags: {
        type: Boolean,
        default: true
    },
    tooltip: {
        type: Boolean,
        default: false
    },
    options: {
        default() {
            return {}
        },
        type: Object,

    },
});

// 获取组件el-form-item的的label名称，添加在placeholder中
const { form, formItem } = useFormItem()
const placeholder = computed(() => {
    // 查询表单
    if (!form?.model && form?.inline) return '请输入搜索关键词'

    // 新增or编辑表单
    if (formItem?.label) return `请选择${formItem.label}`

    return '请输入'
})
const selectChange = (val: any) => {
    emit('myChange', val)
    console.log(val);
}

</script>

<style scoped></style>